<template>
	<view class="YmContent">
		<view class="withdrew-container">
			<view class="head-box">
				<text decode="true" class="header-title">提现金额</text>
				<view class="input-box1 ali-c">
					<text decode="true" class="icon">￥</text>
					<input class="input" maxlength="8" v-model.trim="inputValue" placeholder-class="placeholder" type="digit" placeholder="0.00" />
				</view>
				<view class="tips-title ali-c jus-b">
					<view class="">
						<text decode="true" class="t1">可提现金额为<text class="cobase" style="padding: 0 10upx;font-size: 40upx;font-weight: 600;">{{totalmoney}}</text>元</text>
						<view class="t1">最低<text class="cobase" style="padding: 0 10upx;font-size: 40upx;font-weight: 600;">1</text>元起提现</view>
					</view>
				</view>
				
				<view >
					<view class="" style="margin-top: 60upx;" >
						<view class="ali-c jus-b">
							<view class="">
								<text decode="true" class="header-title">真实姓名</text>
								<text class="head-title2">(必填项)</text>
							</view>
							<navigator v-if="withdraw_way==1"  url="/pages/mine/realnamecourse/realnamecourse">
								<view class="ali-c">
									<text decode="true" style="color: #646464;font-size: 28rpx;margin-right: 10rpx;">了解微信实名认证</text>
									<image style="width: 14rpx;height: 24rpx;" :src="photo_cdn+'zpupload/static/icon/jiantousd.png'" mode="aspectFit"></image>
								</view>
							</navigator>
						</view>
					</view>
					<input class="nameinput" v-model="realname" placeholder-class="placeholder2" type="text" placeholder="请填写微信/ 实名认证的真实姓名" />
				</view>
				
				
				<view >
					<view class="" style="margin-top: 60upx;" >
						<view class="ali-c jus-b">
							<view class="">
								<text decode="true" class="header-title">手机号</text>
								<text class="head-title2">(必填项)</text>
							</view>
						</view>
					</view>
					<input class="nameinput" v-model="mobile" placeholder-class="placeholder2" type="number" placeholder="请输入手机号" />
				</view>
				
				
				<view v-if="withdraw_way==2">
					<view class=""  style="margin-top: 60upx;">
						<view class="ali-c jus-b">
							<view class="">
								<text decode="true" class="header-title">银行卡</text>
								<text class="head-title2">(必填项)</text>
							</view>
						</view>
					</view>
					<input @tap="tapselbank" class="nameinput" disabled="disabled" v-model="yhk_account" placeholder-class="placeholder2" type="text" placeholder="请选择银行卡" />
				</view>

				
				<radio-group @change="payType_change" class="payType flex ali-c">
					
					<view class="ali-c">
						<label for="" class="ali-c">
							<radio :color="$themecolor" value="1" class="" :checked="withdraw_way==1"></radio>
							<image :src="photo_cdn+'zpupload/static/img/weixin.png'" mode="scaleToFill" border="0" class="payicon"></image>
							<text decode="true" class="title">微信</text>
						</label>
					</view>
					
					<view class="ali-c ml-50">
						<label for="" class="ali-c">
							<radio :color="$themecolor" value="2" class="" :checked="withdraw_way==2"></radio>
							<image :src="photo_cdn+'zpupload/static/img/banks.png'" mode="scaleToFill" border="0" class="payicon"></image>
							<text decode="true" class="title">银行卡</text>
						</label>
					</view>
				</radio-group>
				
			</view>
			<view class="withdrawal_rule">
				 {{cash_rule}}
			</view>
			
			<button v-if="isShow && totalmoney!=0" @tap="btSubmit" class="btSubmit">申请提现</button>
			<button v-else class="btSubmit" style="opacity: 0.8;">申请提现</button>
		</view>
		
		<selectbank ref="selectbank" :bankcards="Bankcards" @select="selectbankfun"></selectbank>
		<!-- 选择银行卡 -->
		
	</view>
</template>

<script>
	import {getUserinfo} from "@/utils/api/api.js";
	import {withdraw,myBank} from "@/utils/api/user.js";
	import selectbank from "@/components/selectbank/selectbank.vue"
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn} = config.baseUrl;
	export default {
		data() {
			return {
				photo_cdn,
				inputValue: '',//输入的金额
				realname: '',//实名
				totalmoney: 0,//余额
				isShow: false,//输入框表单验证是否通过
				mobile: '',
				code: '',
				userinfo:{},
				cash_rule:"提现规则如下：1.提现申请时间为每周一上午8:00至18:00，提现审核时间为五日内，节假日顺延；2.当前仅支持提现到微信钱包，请填写微信认证姓名；3.单笔提现最高金额为500元，允许多次提现，同个账户一天最多可提现20000元；",//提现规则内容
				yhk_account:"",//银行卡账号
				bankcard_id:"",//银行卡id
				withdraw_way:"1",//1提现微信，2提现银行卡 
				Bankcards:[],//银行卡列表
			}
		},
		components:{
			selectbank,
		},
		watch: {
			inputValue() {
				if(parseFloat(this.inputValue) < 0 ) {
					this.$api.msg('输入金额有误')
					setTimeout(() => {
						this.inputValue = ''
					},500)
				}
				if(parseFloat(this.inputValue) > parseFloat(this.totalmoney)){
					this.$api.msg('金额不足')
					setTimeout(() => {
						this.inputValue = ''
					},500)
				}
				if(this.inputValue.length > 0 && this.inputValue >= 1) {
					this.isShow = true
				} else {
					this.isShow = false
				}
			}
		},
		onLoad(options) {
			this.getUserinfofun();
			this.myBankfun();
		},
		onUnload() {
			
		},
		methods: {
			//我的银行卡
			myBankfun(){
				myBank({
					
				}).then((res)=>{
					if(res.code==1){
						this.Bankcards = res.data.Bankcards;
					}else{
						this.Bankcards = [];
					}
				})
			},
			//显示选择银行卡
			tapselbank(){
				this.$refs.selectbank.show();
			},
			//捕获选择银行卡
			selectbankfun(e){
				this.yhk_account = e.data.bank_num;//银行卡账号
				this.bankcard_id = e.data.id;//银行卡id
			},
			//获取用户信息
			getUserinfofun(){
				getUserinfo({
					
				}).then((res)=>{
					if(res.code==1){
						uni.getStorageSync("userinfo",res.data.userinfo);
						this.userinfo = res.data.userinfo;
						this.totalmoney = parseFloat(this.userinfo.commission).toFixed(2);
					}
				})
			},
			// 选择支付方式
			payType_change(e) {
				let value = e.detail.value
				this.withdraw_way = value;
			},
			// 提现方法
			getMoneyFun() {
				uni.showLoading({
					title: "请稍后..."
				})
				let params = {
					money: this.inputValue,//提现金额
					withdraw_way:this.withdraw_way,//1提现微信，2提现银行卡 
					realname: this.realname,//真实姓名
					mobile:this.mobile,//手机号
				}
				if(this.withdraw_way==2){
					params.bankcard_id = this.bankcard_id;
				}
				withdraw(params).then(res => {
					if(res.code == 1) {
						this.inputValue = '';
						this.realname = '';
						this.mobile = '';
						uni.hideLoading()
						this.$api.msg('提交成功,请等待审核!')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						},1500)
					} else {
						this.inputValue = ''
						uni.hideLoading()
						this.$api.msg(res.msg);
					}
				})
			},
			// 点击确认
			btSubmit() {
				let reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^[1-9]$)|(^\d\.[1-9]{1,2}$)|(^\d\.[0]{1}[1-9]{1}$|(^\d\.[1-9]{1}[0]{1}$)$)/;
				let num = this.inputValue;
				if (reg.exec(num)) { 
				} else {
					this.$api.msg("您输入的金额有误~");
					setTimeout(() => {
						this.inputValue = ''
					},500)
					return false;
				}
				let realname = this.realname
				let inputmoney = parseFloat(this.inputValue);//.toFixed(2)
				let totalmoney = parseFloat(this.totalmoney);//.toFixed(2)
				
				
				if(parseFloat(inputmoney) <= 0 || parseFloat(inputmoney) > parseFloat(totalmoney) ) {
					this.$api.msg('金额不足,请重新输入')
					setTimeout(() => {
						this.inputValue = ''
					},500)
					return
				}
				
				if(!this.realname) {
					this.$api.msg('请输入你的真实姓名')
					return
				}
				
				let pattern = /^1[23456789]\d{9}$/; // 正则表达式
				let bool = pattern.test(this.mobile)
				if(!bool) {
					this.$api.msg('请输入你的手机号')
					return
				}
				
				if(this.withdraw_way==2){
					if(!this.bankcard_id) {
						this.$api.msg('请选择银行卡')
						return
					}
				}

				this.getMoneyFun()
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./withdrawal.scss";
</style>
